<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webgl1</title>
    <script id="shader-vs">
        attribute vec3 v3Position;
        void main(){
        gl_Position = vec4(v3Position, 0.0, 1.0)
        }
    </script>

    <script id="shader-fs">
    void main(){
        gl_FragColor = vec4(0.0, 1.0,1.0, 1.0)
    }
    </script>

    <script>
        function getShaderSource(scriptID){
            var shaderScript = document.getElementById(scriptID);
            if(shaderScript == null) return "";

            var sourceCode = "";
            var  child = shaderScript.firstChild;
            while(child){
                console.log(child)
                if(child.nodeType == child.TEXT_NODE) sourceCode += child.textContent;
                child = child.nextSibling;
            }
            console.log(sourceCode)
            return  JSON.stringify(sourceCode);
        }

        var vertCode =
            'attribute vec3 coordinates;' +

            'void main(void) {' +
            ' gl_Position = vec4(coordinates, 1.0);' +
            '}';

        var fragCode =
            'void main(void) {' +
            ' gl_FragColor = vec4(0, 0.8, 0, 1);' +
            '}';

        var webgl = null;
        var vertextShaderObject = null;
        var fragementShaderObject= null;
        var programObject = null;
        var v3PositionIndex = 0;
        var triangleBuffer = null;
        var triangleBuffer1 = null;
        var indexBuffer =                                                                           null;

        function init(){
            var canvas = document.getElementById('myCanvas');
            webgl = canvas.getContext('webgl');

            webgl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);//缓冲区域

            vertextShaderObject = webgl.createShader(webgl.VERTEX_SHADER);
            fragementShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER);

            webgl.shaderSource(vertextShaderObject,vertCode);//给vertextShaderObject数据源
            webgl.shaderSource(fragementShaderObject,fragCode);//给fragementShaderObject数据源

            webgl.compileShader(vertextShaderObject);
            webgl.compileShader(fragementShaderObject);



            if(!webgl.getShaderParameter(fragementShaderObject, webgl.COMPILE_STATUS)){
                alert('error:fragementShaderObject');
                return;
            }

            if(!webgl.getShaderParameter(vertextShaderObject, webgl.COMPILE_STATUS)){
                alert('error:vertextShaderObject');//返回值错误
                return;
            }
            programObject = webgl.createProgram();//创建程序

            webgl.attachShader(programObject,vertextShaderObject);//把vertextShaderObject库关联到程序中形成可执行代码
            webgl.attachShader(programObject,fragementShaderObject);

            //通过给v3PositionIndex赋值从而给shader-vs的v3Position赋值
            webgl.bindAttribLocation(programObject, v3PositionIndex, "v3Position");

            webgl.linkProgram(programObject);
            if(!webgl.getProgramParameter(programObject, webgl.LINK_STATUS)){
                alert('error:programObject');
                return;//检查链接有没有错误
            }

            webgl.useProgram(programObject);

            var jsArrayData =
                [
                    -0.5,+0.5,0.0,0.0, 0.0, 0.0,
                    +0.5, +0.5, 0.0,0.0, 0.0, 0.0,
                    +0.5,-0.5,0.0,0.0, 0.0, 0.0,
                    -0.5, +0.5, 0.0,0.0, 0.0, 0.0,
                    -0.5,-0.5,0.0,0.0, 0.0, 0.0,
                    -0.5,-0.5,0.0,0.0, 0.0, 0.0
                ]

            var indexDatas =
                [
                    0,1,2,
                    0,2,3
                ]

            triangleBuffer = webgl.createBuffer();
            webgl.bindBuffer(webgl.ARRAY_BUFFER,triangleBuffer);
            //在缓冲区赋值，把数据传到显卡，静态：不会经常改的数据
            webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData), webgl.STATIC_DRAW);

            // triangleBuffer1 = webgl.createBuffer();
            // webgl.bindBuffer(webgl.ARRAY_BUFFER,triangleBuffer1)
            // webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData1), webgl.STATIC_DRAW);

            //创建索引缓冲区
            indexBuffer = webgl.createBuffer();
            webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER,indexBuffer);
            webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexDatas), webgl.STATIC_DRAW);

            webgl.clearColor(106/255, 121/255, 0.0, 1.0);
            webgl.clear(webgl.COLOR_BUFFER_BIT);//颜色缓冲区

            webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);//使用顶点缓存区
            webgl.bindBuffer(webgl.ARRAY_BUFFER, indexBuffer);//使用索引缓存区

            webgl.enableVertexAttribArray(v3PositionIndex);//给顶点传值
            //给shader-vs的变量赋值，三维元素3对应决定vertCode的vec3，浮点数，是否规格化，偏移量：一个顶点占用的多少字节，从顶点缓冲区第几个元素赋值
            // webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 4*3, 0);
            webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 0, 0);//使用顶点缓冲区

            webgl.drawArrays(webgl.TRIANGLES,3,3);//绘制三角形，从第一个元素开始绘制，绘制6个,决定vertCode执行次数

            webgl.drawElements(webgl.TRIANGLES,6,webgl.UNSIGNED_SHORT,0);//UNSIGNED_SHORT每个站两个字节
        }
    </script>
</head>
<body onload="init()">
<canvas id="myCanvas" style="border: 1px solid #aaa" height="500" width="700"></canvas>

</body>
</html>
